<template>
  <view>
    <view class="p-2 font-14" style="background: #fbf0e1;color: #aa742a">
      地址信息仅用于上门服务，隐私信息将完全保密
    </view>
    <view class="rounded-lg m-2 p-2 bg-white">
      <uni-forms err-show-type="toast" ref="addressForms" :model="addressForms" :rules="rules">
        <view class="flex align-center justify-between" @click="toCity">
          <text class="font font-weight-bold">所在城市</text>
          <text class="flex-1 ml-5">{{ addressForms.city }}</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
        <uni-forms-item name="location">
          <view class="flex align-center justify-between mt-5">
            <text class="font font-weight-bold">具体位置</text>
            <input class="flex-1 ml-5" v-model="addressForms.location" placeholder="请填写街道/小区/办公楼"
                   placeholder-style="font-size: 14px;color: #BEBEBEFF">
          </view>
        </uni-forms-item>
        <uni-forms-item name="buildingNo">
          <view class="flex align-center justify-between mt-5">
            <text class="font font-weight-bold">楼号/门牌号</text>
            <input class="flex-1 ml-5" v-model="addressForms.buildingNo" placeholder="例：6号楼203室"
                   placeholder-style="font-size: 14px;color: #BEBEBEFF">
          </view>
        </uni-forms-item>
        <uni-forms-item name="contacts">
          <view class="flex align-center justify-between mt-5">
            <text class="font font-weight-bold" style="width: 120rpx;">联系人</text>
            <input class="flex-1 ml-5" v-model="addressForms.contacts" placeholder="请填写联系人姓名"
                   placeholder-style="font-size: 14px;color: #BEBEBEFF">
          </view>
        </uni-forms-item>
        <uni-forms-item name="phone">
          <view class="flex align-center justify-between mt-5">
            <text class="font font-weight-bold">手机号码</text>
            <input class="flex-1 ml-5" v-model="addressForms.phone" maxlength="11" type="number"
                   placeholder="请填写联系人手机号码" placeholder-style="font-size: 14px;color: #BEBEBEFF">
          </view>
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="m-3">
      <u-button type="primary" :hairline="false" shape="circle" @click="submit">保存</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addressForms: {
        // 城市
        city: '',
        // 具体位置
        location: '',
        // 楼号
        buildingNo: '',
        // 联系人
        contacts: '',
        // 号码
        phone: ''
      },
      rules: {
        location: {
          rules: [
            {
              required: true,
              errorMessage: '请填写具体位置'
            }
          ]
        },
        buildingNo: {
          rules: [
            {
              required: true,
              errorMessage: '请填写楼号'
            }
          ]
        },
        contacts: {
          rules: [
            {
              required: true,
              errorMessage: '请填写联系人'
            }
          ]
        },
        phone: {
          rules: [
            {
              required: true,
              errorMessage: '请填写手机号码'
            },
            {
              validateFunction(rules, value, data, callback){
                if (value.length < 11){
                  callback('请填写完整的手机号码')
                }
                return true
              }
            }
          ]
        },
      }
    };
  },
  onLoad(options) {
    let {id} = options
    uni.setNavigationBarTitle({
      title: id ? "编辑地址" : "添加地址"
    })
  },
  onShow() {
    this.addressForms.city = uni.getStorageSync('city')
  },
  methods: {
    toCity() {
      uni.navigateTo({
        url: '/pages/city_list/city_list'
      })
    },
    submit(ref) {
      this.$refs.addressForms.validate().then(res => {
        console.log('success', res);
        uni.showToast({
          title: ``
        })
      }).catch(err => {
        console.log('err', err);
      })
    },
  },
}
</script>

<style lang="scss">
page {
  background: #f5f5f7;
}

</style>
